<template>
  <div class="flx-c" :style="{height:`${winHeight-100}px`}">
    <ZgDialog title="选择功能" width="70%" v-model="showMenuDialog" :showFooter="false">
      <div class="scroll pd15" :style="{height:`${winHeight-240}px`}">
        <div class="parent-menu" v-for="m in menuArr" :key="m.id">
          <div class="name">{{ m.name }}</div>
          <a-row :gutter="30" class="child-menu" >
            <a-col :span="3" v-for="cm in m.children" :key="cm.id" @click="saveMenu(cm)">
              <div class="item" :class="hasThisMenu(cm.id)?'has':''">
                {{ cm.icon }} {{ cm.name }}
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </ZgDialog>
    <div class="box">
      <div style="padding:0 15%;">
        <div class="wfull flx-c pos-rlt">
          <a-input class="diy-input" :placeholder="placeholder" v-model="text" @keyup.enter="sendText">
          </a-input>
          <a-icon class="left-btn" type="android" />
          <a-icon class="right-btn" type="audio" v-if="false" />
        </div>
      </div>
      <ZgDataAdmin></ZgDataAdmin>
      <ZgDataAdmin></ZgDataAdmin>
      <div class="mt30" style="padding:0 15%;">
        <a-row :gutter="10">
          <a-col :span="4" v-for="m in personalMenu" :key="m.id">
            <div class="diy-menu flx-c" @click="toFunction(m)" @dblclick="del(m)">
              <div>
                <div class="flx-c icon"><i class="fa fa-th-large"/></div>
                <div class="flx-c name">{{ m.name }}</div>
              </div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="diy-btn flx-c" @click="toSelMenu">
              <i class="fa fa-plus"/>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      text: '',
      placeholder: '您好，欢迎使用智能结算系统',
      showMenuDialog: false,
      menuArr: [],
      personalMenu: [],
      timer: null
    }
  },
  mounted () {
    this.fetchMenu()
    this.searchPersonalMenu()
  },
  methods: {
    sendText () {
      this.$eventBus.$emit('homeSendText', this.text)
    },
    hasThisMenu (id) {
      return this.personalMenu.some(t => {
        return t.id === id
      })
    },
    searchPersonalMenu () {
      this.$http.get('/zg-system/user/menu/list', {}, data => {
        this.personalMenu = data
      })
    },
    toSelMenu () {
      this.showMenuDialog = true
    },
    toFunction (m) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.toPage(m.url)
      }, 500)
    },
    del (m) {
      clearTimeout(this.timer)
      this.confirm(() => {
        this.$http.post('/zg-system/user/menu/del', m.relId, () => {
          this.searchPersonalMenu()
        })
      }, '确定要删除这条记录么')
    },
    fetchMenu () {
      this.$http.get('/zg-system/user/menu', {}, data => {
        this.menuArr = data
      })
    },
    saveMenu (cm) {
      if (this.hasThisMenu(cm.id)) {
        this.$info({ title: '您已经保存过这个功能' })
        return
      }
      this.showMenuDialog = false
      this.$http.post('/zg-system/user/menu/add', cm.id, () => {
        this.searchPersonalMenu()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  width:75%;
  .left-btn{
    position: absolute;
    top:20px;
    left:25px;
    font-size:24px;
    &:hover{
      cursor:pointer;
      color:#40a9ff;
    }
  }
  .right-btn{
    position: absolute;
    top:20px;
    right:25px;
    font-size:24px;
    &:hover{
      cursor:pointer;
      color:#40a9ff;
    }
  }
  .diy-menu{
    width:100px;
    height:100px;
    background:#f2f2f2;
    border-radius:3px;
    margin:0 auto 30px;
    padding:15px;
    .icon{
      font-size:24px;
    }
    .name{
      font-size:14px;
      margin-top:10px;
    }
    &:hover{
      cursor:pointer;
      background:#40a9ff;
      color:#fff;
    }
  }

  .diy-btn{
    width:100px;
    height:100px;
    cursor:pointer;
    border-radius:3px;
    margin:0 auto 30px;
    border:dashed 1px #ddd;
    &:hover{
      border:dashed 1px #40a9ff;
      .fa{
        color:#40a9ff;
      }
    }
    .fa{
      font-size:16px;
    }
  }
}
.diy-input{
  font-size:20px;
  padding:0 60px;
  width:100%;
  height:64px;
  border-radius:32px;
  border:solid 1px #999;
}
.parent-menu{
  border-bottom:dashed 1px #999;
  padding-bottom:10px;
  margin-bottom:10px;
  .name{
    font-size:16px;
    font-weight:bold;
    margin-bottom:10px;
  }
  .child-menu{
    .item{
      background:#f2f2f2;
      padding:4px 10px;
      border-radius:6px;
      width:100%;
      text-align:center;
      margin-bottom:10px;
      &.has{
        background: #333;
        color:#fff;
      }
      &:hover{
        background: #333;
        color:#fff;
        cursor:pointer;
      }
    }
  }
}
</style>
